<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>30 days of moo - day 11</title>

<!--  your css style sheet 
<link rel=stylesheet href="main.css" type="text/css" media=screen>  -->  
<!--  the Mootools 1.2 core javascript file 
<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>-->  
<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2.3.1-more.js" type="text/javascript"></script>
<script src="../source/visualWindow.js" type="text/javascript"></script>
<script src="../source/easyShadow.js" type="text/javascript"></script>
<script src="../source/maskWindow.js" type="text/javascript"></script>
<!--  your external javascript file 
<script src="js/external_file.js" type="text/javascript"></script>  
 -->  
<!-- here is your script tag within the head doc, you can call your functions here -->
<style>

/*Your CSS file*/\
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
}

#drag_me {
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}


#drop_here {
	width: 200px;
	height: 200px;
	background-color: #eee;
}


#drag_cont {
	background-color: #ccc;  
	height: 600px; 
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}


#drag_me_handle {
	width: 100%;
	height: auto;
	background-color: #666;
}

#drag_me_handle span {
	display: block;
	padding: 5px;
}


.indicator {
	width: 100%;
	height: auto;
	background-color: #0066FF;
	border-bottom: 1px solid #eee;
}

.indicator span {
	padding: 10px;
	display: block;
}

.draggable {
	width: 200px;
	height: 200px;
	background-color: blue;
}

.VW-close, .VW-min, .VW-max, .VW-icon, .VW-resize{
	width: 16px; height: 16px; float: right;
	cursor: pointer;	margin: 5px 2px 0px 2px;
}
.VW-close{
	background-image: url('cross.png');
}
.VW-min{
	background-image: url('application_put.png');
}
.VW-max{
	background-image: url('application_double.png');
}
.VW-icon{
	background-image: url('blueprint_horizontal.png');
}
.VW-resize{
	background-image: url('arrow_out.png');
	cursor: cross;
}
.VW-bodyMsg{
	width: 100%;
}

.VW-icon, .VW-title{
	float:left;
}
.VW-titleBar{
	width: 100%; background-color: #e5e5e5; height: 28px; margin: 0px; padding: 0px;
	background-image: url('nav-bg-reverse.gif');
}
.VW-title{
	margin: 5px 0 0 5px;
}
.VW-bodyBar{
		width: 300px; background-color: #eee; position: relative;
	height: 300px;  margin: 0px; padding: 0px; overflow: auto;
	overflow-y: hidden; overflow-x: hidden;
}
.VW-footerBar{
	width: 100%; height: 28px; background-color: #e1e1e1; margin: 0px; padding: 0px;
	background-image: url('nav-bg-reverse.gif');
}
.VW-window{
	width: auto; height: auto; border: 2px solid #f1f1f1;padding: 9px;
	background-color: #fcfcfc; position: absolute;
	background: transparent url('b.png');
}
.VW-wrapper{
	border: 2px solid #f1f1f1; padding: 2px; width: auto; background-color: white;
}
.VW-body{
	padding: 10px;
}
.VW-iframe{
	width: 100%;
	height: 100%;
}

.dock{
	height: 28px;
    width: 500px;
	border: 2px solid #eca; background-color: #fee;
	float: left;
}
.parent{
	width: 480px; height: 600px; border: 1px solid transparent; overflow: auto; float: left; margin: 5px;
	overflow-x: hidden; overflow-y: hidden;
}

.minimize, .minimizeSub{
	width: 16px; height: 16px;
	background-image: url('control_stop.png');
	cursor: pointer;
	margin: 8px; float: right;
}

.restore, .restoreSub{
	width: 16px; height: 16px;
	background-image: url('control_play.png');
	cursor: pointer;	margin: 8px; float: right;
}

#dockMain{
	width: 100%; height: 28px;
	background-color: #333;
	border: 0px solid #999;
	margin: 0px;
	margin-left: auto ;
	margin-right: auto ;
	position: fixed !important;
	bottom: 0px;
	z-index: 9999999;

}

#dockMain > div > div{
	margin-left: 7px;
}

.dockurl{
	float: right; width: 550px;background-color:blue;
}
body{
	font-size: 8px;font-family: Verdana;
	text-align: center;
}
</style>

<script type="text/javascript">  
//look for the functions within the external javascript file


window.addEvent('domready', function() {

var easyShadow = new EShadow({'className': 'parent'});
var easyShadow = new EShadow({'className': 'shadow'});
	var x = new MaskWindow({
		'containerId': 'dockMain',
		'contentId': 'dockWrapper'
		});

	$$('div.restoreSub').addEvent('click', function(){
		var v = this.getParent().getChildren().each(function(e){
	        var p = e.getProperty('class');
	        if(p!='restoreSub' && p!='minimizeSub'){
	            e.fireEvent('click');
	        }
	    });
	});

	$$('div.minimizeSub').addEvent('click', function(){
		var v = this.getParent().getChildren().each(function(e){
	        var p = e.getProperty('class');
	        if(p!='restoreSub' && p!='minimizeSub'){
	            var p = e.getProperty('conid');
				$(p).hide();
	        }
	    });
	});

	$$('minimizeSub').addEvent('click', function(){
		var v = this.parent.getChildren().each(function(e){
	        var p = e.getProperty('class');
	        if(p!='restoreSub' && p!='minimizeSub'){
	            e.fireEvent('click');
	        }
	    });
	});
    
    $('restore').addEvent('click', function(){

	});
	
	
	$('minimize').addEvent('click', function(){
	    var v = $(document.body).getElements('div[id^=vw_min_]').each(function(e){
	        //var p = e.getProperty('id');
	        //if(p!='restore' && p!='minimize'){
	            e.fireEvent('click');
	            //alert(e.getProperty('id'));
	        //}
	    });
	});
	
	$('yahoo').addEvent('click', function(){
		var vw = new VWindow({
			'bodyHtml': '//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file',
			'titleHtml': 'this is title',
			'width': '400px',
			'height': '300px',
			'dockId': 'dock',
			'url': 'http://www.yahoo.com',
			'mode': 'iframe',
			'idPostfix': 'yahoo',
			'parentId': 'parent1'
		});
	});

	$('google').addEvent('click', function(){
		var vw = new VWindow({
			'bodyHtml': '//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file',
			'titleHtml': 'this is title',
			'width': '400px',
			'height': '300px',
			'dockId': 'dock',
			'url': 'http://www.google.com',
			'mode': 'iframe',
			'idPostfix': 'google',
			'parentId': 'parent2'
		});
	});

	$('cnn').addEvent('click', function(){
		var vw = new VWindow({
			'bodyHtml': '//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file',
			'titleHtml': 'this is title',
			'width': '400px',
			'height': '300px',
			'dockId': 'ndock',
			'idPostfix': 'cnn',
			'maskWindow': false,
			'parentId': 'parent'
		});
	});

	$('native').addEvent('click', function(){
		var vw = new VWindow({
			'bodyHtml': '//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file//look for the functions within the external javascript file',
			'titleHtml': 'this is title',
			'width': '400px',
			'height': '300px',
			'dockId': 'ndock',
			'idPostfix': 'native',
			'maskWindow': false,
			'parentId': 'parent',
			'vwClass': 'shadow VW-window',
			'resizable': false
		});
	});

	
	
	
});

window.onbeforeunload = function(){

}
</script>   


</head>
<body> 

<div id="dockMain">
	<div id="dockWrapper" style="width: 2000px; height: 28px">
		<div id="dock" class="dock"><div class="minimizeSub"></div><div class="restoreSub"></div></div>
		<div id="ndock" class="dock"><div class="minimizeSub"></div><div class="restoreSub"></div></div>
		<div id="dockurl" class="dockurl"><INPUT TYPE="text" NAME=""><input type="submit" /></div>
	</div>
</div>


<div id="command"><div id="minimize" class="minimize"></div><div id="restore" class="restore"></div></div>

<div id="yahoo" style="float: left;">Yahoo</div>///
<div id="google" style="float: left;">Google</div>///
<div id="cnn" style="float: left;">CNN</div>///
<div id="native" style="float: left;">CNN</div>///
<div style="width:1000px; border: 1px solid #ccc; margin-left: auto; margin-right: auto;">
<div id='parent' class='parent'></div>
<div id='parent1' class='parent'></div>
<div id='parent2' class='parent'></div>
<div id='parent3' class='parent'></div>
</div>
<!--
    <div id="drag_cont">
        <div id="start" class="indicator">
        	<span>Start</span>
        </div> 
        
        <div id="drag_ind" class="indicator">
        	<span>Drag</span>
        </div>
        
        <div id="complete" class="indicator">
        	<span>Complete</span>
        </div>
        
        <div id="enter" class="indicator">
        	<span>Enter Droppable Element</span>
        </div>
        
        <div id="leave" class="indicator">
        	<span>Leave Droppable Element</span>
        </div>
        
        <div id="drop_in_droppable" class="indicator">
        	<span>Dropped in Droppable Element</span>
        </div>

        <div id="drag_me">
            <div id="drag_me_handle">
            	<span>handle</span>
            </div>
        </div>
        
        <div id="drop_here" class="draggable"> 
        </div>
    </div>

	--->
</body>
</html> 